<!-- <ion-app>
  <ion-split-pane contentId="main-content">
    <ion-menu contentId="main-content" type="overlay" class="side-width">
      <ion-content>
        <ion-list id="inbox-list">
          <ion-list-header>Inbox</ion-list-header>
          <ion-note>hi@ionicframework.com</ion-note>

          <ion-menu-toggle
            auto-hide="false"
            *ngFor="let p of appPages; let i = index"
          >
            <ion-item
              routerDirection="root"
              [routerLink]="[p.url]"
              lines="none"
              detail="false"
              routerLinkActive="selected"
            >
              <ion-icon
                slot="start"
                [ios]="p.icon + '-outline'"
                [md]="p.icon + '-sharp'"
              ></ion-icon>
              <ion-label>{{ p.title }}</ion-label>
            </ion-item>
          </ion-menu-toggle>
        </ion-list>
      </ion-content>
    </ion-menu>
    <ion-router-outlet id="main-content"></ion-router-outlet>
  </ion-split-pane>
</ion-app> -->
<ion-app>
  <ion-menu side="start" contentId="main-menu">
    <ion-header>
      <ion-toolbar>
        <ion-title size="small">Ionic 5 Menu and Submenu</ion-title>
      </ion-toolbar>
    </ion-header>

    <ion-content>
      <ion-menu-toggle auto-hide="false">
        <ion-list lines="none">
          <ion-item [routerLink]="'/'">
            <ion-icon name="home" slot="start"></ion-icon>
            Home
          </ion-item>
          <ion-item routerLink="todos">
            <ion-icon name="list" slot="start"></ion-icon>
            <ion-label> Todos </ion-label>
          </ion-item>
          <ion-item routerLink="finance">
            <ion-icon name="cash" slot="start"></ion-icon>
            <ion-label> Finance </ion-label>
          </ion-item>
        </ion-list>
      </ion-menu-toggle>
      <ion-item
        lines="none"
        (click)="isRemainder === 1 ? (isRemainder = 0) : (isRemainder = 1)"
      >
        <ion-icon name="notifications" slot="start"></ion-icon>
        Remainder
        <ion-icon
          slot="end"
          [name]="isRemainder ? 'chevron-down' : 'chevron-back'"
        ></ion-icon>
      </ion-item>

      <ion-menu-toggle auto-hide="false">
        <ion-list lines="none">
          <ion-item
            menuclose
            [hidden]="!isRemainder"
            [routerLink]="['/notifications']"
            [queryParams]="{ type: 'birthday' }"
            menuClose
            class="sub-menu"
          >
            <ion-icon name="calendar" slot="start"></ion-icon>
            Birthdays
          </ion-item>
        </ion-list>
      </ion-menu-toggle>
    </ion-content>
  </ion-menu>
  <ion-router-outlet id="main-menu"></ion-router-outlet>
</ion-app>
